﻿@model PackageTrackingModel
@using Logistics.Web.Models.Track;
@{
    ViewBag.Title = "Track Packages";
    Layout = "~/Views/Shared/_Layout";
    //Layout = null;
    string statusType = Model.DisplayedStatusType == 1 ? "normal" : Model.DisplayedStatusType == 2 ? "notice" : "warning";

    Model.IsShipmentComplete = false;
    Model.IsOwnershipVerified = false;
    Model.CanVerify = false;
    Model.CanCancel = false;
    Model.CanChangeDeliveryAddress = false;
    Model.CanChangePickUpAddress = false;
    Model.CanRescheduleDelivery = false;
    Model.CanReschedulePickUp = false;


    // Hard coded events for display
    Model.DisplayedEvents = new List<PackageTrackingModel.DisplayedShipmentStatusEvent>();
    Model.DisplayedEvents.Add(new PackageTrackingModel.DisplayedShipmentStatusEvent()
    {
        EventName = "Order Placed",
        BarWidth = 2
    });
    Model.DisplayedEvents.Add(new PackageTrackingModel.DisplayedShipmentStatusEvent()
    {
        EventName = "Package Picked Up",
        BarWidth = 2
    });
    Model.DisplayedEvents.Add(new PackageTrackingModel.DisplayedShipmentStatusEvent()
    {
        EventName = "In Transit",
        BarWidth = 6
    });
    Model.DisplayedEvents.Add(new PackageTrackingModel.DisplayedShipmentStatusEvent()
    {
        EventName = "Attempted Delivery",
        BarWidth = 2
    });
    Model.DisplayedEvents.Add(new PackageTrackingModel.DisplayedShipmentStatusEvent()
    {
        EventName = "Delivery",
        BarWidth = 2
    });
    Model.DisplayedEventsBarLocation = 12;
    Model.DisplayedStatusType = 1;
    
}
<div class="package-tracking">
    <div class="search-tracking">
        <input type="text" placeholder="Enter tracking number here" />
    </div>
    @if (!string.IsNullOrWhiteSpace(Model.TrackingNumber))
    {
        <h3>Tracking Number: @Model.TrackingNumber</h3>
        <h4>Current Status: <span class="@statusType">@Model.CurrentStatus</span></h4>
        if (Model.Notifications.Count > 0)
        { 
            <div class="validation-notes @statusType">
                <ul>
                    @foreach (var n in Model.Notifications)
                    { 
                        <li>@n</li>
                    }
                </ul>
            </div>
        }
        if (Model.DisplayedEvents != null && Model.DisplayedEvents.Count > 0)
        {
            <div class="foo">
                <div class="bar"></div>
                <div class="package-statuses">
                    @foreach (var s in Model.DisplayedEvents)
                    { 
                        <div class="displayed-status" data-width="@s.BarWidth">@s.EventName</div>
                    }
                </div>
                <i class="fa fa-eject"></i>
            </div>
        }
        <div style="border-top:1px solid #ccc; margin: 10px 0;"></div>

        <div class="row">
            <div class="package-tracking-table col-ms-12 col-xs-12 col-sm-7 col-md-8 col-lg-8">
                <h2>Package History</h2>
                @if (Model.StatusEvents != null && Model.StatusEvents.Count > 0)
                { 
                <table class="table table-striped table-bordered">
                    <thead>
                        <tr><th>Time</th><th>Location</th><th>Note</th></tr>
                    </thead>
                    <tbody>
                        @foreach (var st in Model.StatusEvents)
                        {
                            <tr><td>@st.DateTime.Value.ToString("yyyy/MM/dd H:mm")</td><td>@st.Location</td><td>@st.EventName</td></tr>
                        }
                    </tbody>
                </table>
                }
            </div>
            <div class="package-tracking-action col-ms-12 col-xs-12 col-sm-5 col-md-4 col-lg-4">
                <h2>Package Options</h2>
                @if (!Model.IsShipmentComplete)
                { 
                    if (Model.CanVerify && !Model.IsOwnershipVerified)
                    {
                        <a class="button" href="/">Verify Ownership</a>
                    }
                    if (Model.IsOwnershipVerified)
                    {
                        if (Model.CanReschedulePickUp)
                        {
                            <a class="button" href="/">Reschedule Pick Up</a>
                        }
                        if (Model.CanRescheduleDelivery)
                        {
                            <a class="button" href="/">Reschedule Delivery</a>
                        }
                        if (Model.CanChangePickUpAddress)
                        {
                            <a class="button" href="/">Change Pick Up Address</a>
                        }
                        if (Model.CanChangeDeliveryAddress)
                        {
                            <a class="button" href="/">Change Delivery Address</a>
                        }
                        if (Model.CanCancel)
                        {
                            <a class="button" href="/">Cancel Shipment</a>
                        }
                    }
                }
                <h2>Recently Viewed</h2>
                <div class="recently-viewed-packages">
                </div>
            </div>
        </div>
    }
    else
    { 
        <div>
            No package found or package number invalid.
        </div>
    }
</div>
<script type="text/javascript">
    var hh = 165;
    var lh = 20;
    $(document).ready(function () {
        if ($(".package-statuses").length) {
            var fullbarwidth = 0;
            var barpos = parseInt("@Model.DisplayedEventsBarLocation");
            $(".displayed-status").each(function () {
                fullbarwidth += parseInt($(this).attr("data-width"));
            });
            var p = Math.floor(100 / fullbarwidth);
            var r = 100 % fullbarwidth;
            $(".displayed-status").each(function () {
                var a = 0;
                var i = parseInt($(this).attr("data-width"));
                if (r > 0 && i < r) {
                    a = 1;
                }
                $(this).css("width", p * parseInt($(this).attr("data-width")) + a + "%");
            });
            var a1 = 0;
            if (r > 0 && barpos < r) {
                a1 = 1;
            }
            setTimeout(function () {
                animateBar(barpos * p + a1);
            }, 1000);
        }

        // Package Tracking Cookies
        @if (!string.IsNullOrWhiteSpace(Model.TrackingNumber))
        { 
            <text>
                var cookieName = checkPkgTrackingCookieToSave();
                var d = new Date();
                d.setTime(d.getTime() + (5 * 60 * 1000));
                var cval = {
                    tn: "@Model.TrackingNumber",
                    ex: d,
                    st: "@Model.CurrentStatus"
                }
                cval = JSON.stringify(cval);
                setPkgTrackingCookie(cookieName, cval, 5);
            </text>
        }
        var ckey = [];
        for (var i = 1; i <= 4; i++) {
            var cname = "pkgtra" + i;
            if (checkPkgTrackingCookie(cname)) {
                var cval = JSON.parse(getPkgTrackingCookie(cname));
                ckey.push({
                    'tn': cval.tn,
                    'ex': cval.ex,
                    'st': cval.st
                });
            }
        }
        ckey.sort(function (a, b) { return a.ex - b.ex });
        for (var i in ckey) {
            $(".recently-viewed-packages").append('<div class="recently-view"><h4>' + ckey[i].tn + '</h4><span class="delivered">' + ckey[i].st + '</span> on ' + ckey[i].ex + '</div>');
        }
    });
    function animateBar(value) {
        $(".bar").stop().animate({
            width: value + "%",
            backgroundColor: "hsl(" + parseInt((hh - lh) * value) / 100 + ",50%,50%)"
        }, 1200);
        $(".bar").parent().find(".fa").stop().animate({
            left: value + "%"
        }, 1200);
    }

    function setPkgTrackingCookie(cname, cvalue, exmin) {
        var d = new Date();
        d.setTime(d.getTime() + (exmin * 60 * 1000));
        var expires = "expires=" + d.toUTCString();
        document.cookie = cname + "=" + cvalue + "; " + expires;
    }
    function getPkgTrackingCookie(cname) {
        var name = cname + "=";
        var ca = document.cookie.split(';');
        for (var i = 0; i < ca.length; i++) {
            var c = ca[i];
            while (c.charAt(0) == ' ') c = c.substring(1);
            if (c.indexOf(name) == 0) return c.substring(name.length, c.length);
        }
        return "";
    }
    function checkPkgTrackingCookie(cname) {
        var c = getPkgTrackingCookie(cname);
        if (c != "") {
            return true;
        }
        return false;
    }
    function checkPkgTrackingCookieToSave() {
        if ("@Model.TrackingNumber" != "") {
            for (var i = 1; i <= 4; i++) {
                var cname = "pkgtra" + i;
                if (checkPkgTrackingCookie(cname)) {
                    var cval = JSON.parse(getPkgTrackingCookie(cname));
                    if (cval.tn == "@Model.TrackingNumber") {
                        return cname;
                    }
                }
            }
            for (var i = 1; i <= 4; i++) {
                var cname = "pkgtra" + i;
                if (!checkPkgTrackingCookie(cname)) {
                    return cname;
                }
            }
            var ckey = [];
            for (var i = 1; i <= 4; i++) {
                var cname = "pkgtra" + i;
                if (checkPkgTrackingCookie(cname)) {
                    var cval = JSON.parse(getPkgTrackingCookie(cname));
                    ckey.push({
                        'cn': cname,
                        'ex': cval.ex
                    });
                }
            }
            ckey.sort(function (a, b) { return a.ex - b.ex });
            return ckey[0].cn;
        }
    }
</script>
